﻿<div class="control-group form-field-vimeo-preview">
    <cms-field>
        <label class="control-label" for="{{vm.modelName}}">{{vm.title}}:</label>
        <div class="controls">
            <div class="image-asset">
                <input type="hidden"
                       id="{{vm.modelName}}"
                       name="{{vm.modelName}}"
                       ng-model="vm.model"
                       ng-change="vm.onChange()" />

                <cms-vimeo-video cms-model="vm.model"
                                 class="form-field-vimeo-preview"></cms-vimeo-video>
                <div ng-if="vm.model.videoUrl">{{vm.model.title}}</div>
                <div ng-if="vm.model.videoUrl">{{vm.model.descripion}}</div>
            </div>

            <div class="collection-actions" ng-show="vm.formScope.editMode && !vm.readonly">
                <cms-button-icon cms-title="{{vm.buttonText}}"
                                 cms-icon="cog"
                                 ng-click="vm.showPicker()"
                                 ng-disabled="vm.disabled">
                </cms-button-icon>
                <cms-button-icon cms-title="Remove"
                                 cms-icon="trash-o"
                                 ng-if="vm.isRemovable"
                                 ng-click="vm.remove()"
                                 ng-disabled="vm.disabled">
                </cms-button-icon>
            </div>

            <cms-form-field-validation-summary></cms-form-field-validation-summary>
        </div>
    </cms-field>
    <p class="help-inline" ng-if="vm.description">
        <small>{{vm.description}}</small>
    </p>
</div>